$(function () {
var swidth = $("#focus").width();
var len = $("#focus ul li").length;
var index = 0;
var pictimer;
var btn =
"
/ ";
$("#focus").append(btn);
// 背景
$("#focus .btnbg").css({
background: "rgba(0, 0, 0,0.5)",
display: "flex",
"align-items": "center",
"justify-content": "space-between",
padding: "0 10px",
"box-sizing": "border-box",
});
$(".btnbg .kong").css("width", "84%");
$(".spanleft").css({
color: "#fff",
"font-family": "微软雅黑",
"font-size": "18px",
});
$(".spanleft .spanl").css("font-size", "24px");
$("#focus ul li p").css({
position: "absolute",
bottom: "13px",
width: "480px",
height:"40px",
left: "80px",
"line-height":"48px",
"text-align": "center",
"font-family": "微软雅黑",
color: "#fff",
"font-size": "18px",
overflow: "hidden",
"text-overflow": "ellipsis",
"white-space": "nowrap",
"z-index": "999",
});
$("#focus .btnbg img").css("cursor", "pointer");
$(".btnbg .spanr").text(len);
$("#focus .btnbg .spanl").text(index + 1);
// $("#focus .btn span").mouseenter(function () {
// index = $("#focus .btn span").index(this);
// showpics(index);
// }).eq(0).trigger("mouseenter");
$("#focus ul").css("width", swidth * (len + 1));
$("#focus")
.hover(
function () {
clearinterval(pictimer);
},
function () {
pictimer = setinterval(function () {
$("#focus .btnbg .spanl").text(index + 1);
if (index == len) {
showfirpic();
index = 0;
$("#focus .btnbg .spanl").text(1);
} else {
showpics(index);
}
index++;
}, 3000);
}
)
.trigger("mouseleave");
// setinterval(function(){
// console.log(index);
// },3000)
function showpics(index) {
var nowleft = -index * swidth;
$("#focus ul").stop(true, false).animate({ left: nowleft }, 500);
$("#focus .btn span").removeclass("on").eq(index).addclass("on");
}
function showfirpic() {
$("#focus ul").append($("#focus ul li:first").clone());
var nowleft = -len * swidth;
console.log(nowleft, "距离");
$("#focus ul")
.stop(true, false)
.animate({ left: nowleft }, 0, function () {
$("#focus ul").css("left", "0");
$("#focus ul li:last").remove();
});
$("#focus .btn span").removeclass("on").eq(0).addclass("on");
}
$(".imgright").click(function () {
if (index === len - 1) {
index = -1;
showfirpic();
} else {
$("#focus ul")
.stop()
.animate({ left: -index * swidth - swidth }, 500);
}
if (index == -1) {
console.log(index);
} else {
}
$("#focus .btnbg .spanl").text(index + 2);
index++;
// console.log(index);
// console.log(len);
});
$(".imgleft").click(function () {
console.log(index);
if (index === 0) {
index = 5;
$("#focus ul").append($("#focus ul li:first").clone());
var nowleft = -index * swidth + swidth;
// var nowleft = -len * swidth;
console.log(nowleft, "距离");
$("#focus ul")
.stop(true, false)
.animate({ left: nowleft }, 0, function () {
$("#focus ul").css("left", nowleft);
$("#focus ul li:last").remove();
});
$("#focus .btn span").removeclass("on").eq(0).addclass("on");
} else {
console.log(-index * swidth + swidth);
$("#focus ul")
.stop()
.animate({ left: -index * swidth + swidth }, 500);
$("#focus .btnbg .spanl").text(index);
}
$("#focus .btnbg .spanl").text(index);
index--;
});
});